<template>
  <common-info-dialog
    :visible.sync="dialogShow"
    @cancel="close"
    :infoLoading="infoLoading"
    :title="dialogTitle"
  >
    <common-info-table>
      <common-info-table-cell label="任务名称"
        >{{ detail.jobName }}
      </common-info-table-cell>
      <common-info-table-cell label="收件人邮箱"
        >{{ detail.jobEmails }}
      </common-info-table-cell>
      <common-info-table-cell label="审计周期" width="50%"
        >{{ detail.jobCycleString }}
      </common-info-table-cell>
      <common-info-table-cell label="创建时间" width="50%"
        >{{ detail.createTime }}
      </common-info-table-cell>
    </common-info-table>

    <common-group-title style="padding-left: 18px" title="审计模板" />
    <div class="report-table-list">
      <common-table :data="results" class="report-table-container">
        <el-table-column
          label="模板名称"
          align="left"
          prop="name"
          show-overflow-tooltip
        />
        <el-table-column
          label="描述"
          align="left"
          prop="description"
          show-overflow-tooltip
        />
        <el-table-column
          width="180"
          prop="createTime"
          label="创建时间"
        ></el-table-column>
        <!-- <el-table-column label="操作" align="left" width="50px">
          <template slot-scope="scope">
            <el-button type="text" @click="handlePreview(scope.row)"
              >预览
            </el-button>
          </template>
        </el-table-column> -->
      </common-table>
    </div>
    <common-group-title style="padding-left: 18px" title="模板变量" />
    <div class="report-table-list">
      <common-table :data="results2" class="report-table-container">
        <el-table-column
          label="变量名称"
          align="left"
          prop="name"
          show-overflow-tooltip
        />
        <el-table-column
          label="变量值"
          align="left"
          prop="value"
          show-overflow-tooltip
        />
      </common-table>
    </div>
    <report-preview ref="reportPreview"></report-preview>
  </common-info-dialog>
</template>

<script>
import { getSelectedReports } from "@/api/screenConfig/subscribe/index";
import ReportPreview from "./reportPreview";
export default {
  components: {
    ReportPreview,
  },
  data() {
    return {
      dialogTitle: "",
      dialogShow: false,
      detail: {},
      results: [],
      results2: [],
      infoLoading: false,
    };
  },
  computed: {},
  methods: {
    /**
     * 关闭
     */
    close() {
      this.dialogShow = false;
    },
    /**
     * 显示
     */
    show(data) {
      this.results2 = data.variableMapList;
      this.dialogTitle = "审计任务详情";
      this.detail = data.jobId ? data : {};
      this.getSelectedReports(data.jobId);
      this.dialogShow = true;
    },

    handlePreview(row) {
      this.$refs.reportPreview.show(row);
    },

    getSelectedReports(jobId) {
      this.infoLoading = true;
      getSelectedReports({ jobId: jobId, sourceType: "safety_audit" })
        .then((res) => {
          if (res.code === 200) {
            this.results = res.data;
          } else {
            this.results = [];
          }
        })
        .finally(() => {
          this.infoLoading = false;
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.report-table-list {
  padding: 0 18px;
  margin-bottom: 18px;
  box-sizing: border-box;
  overflow-y: scroll;

  .report-table-container {
    border: 1px solid #eee;
    border-bottom: 0;
  }
}

::v-deep .global-common-info-table-container .global-info-table-row-wrap {
  &:last-child {
    border-bottom: 1px solid #eee;
  }
}
</style>
